// 获取用户uid
let str = JSON.parse(localStorage.getItem('我买网账号'))
let uid = str.id;
// 查询购物车
axios.get("http://jx.xuzhixiang.top/ap/api/cart-list.php", {
    params: {
        id: uid
    }
}).then(res => {
    console.log(res);
    let data = res.data.data;
    console.log(data);
    let resArr = data.map(obj => `
    <tr style="text-align: center;">
    <td style="float: left; width: 276px;">
        <input type="checkbox" name="" id="" class="che">
        <img src="${obj.pimg}" alt=""
            style="width: 62px;">
    </td>
    <td>
        <p class="Pprice">${obj.pprice}</p>
    </td>
    <td>
        <button class="jian" onclick="subNumEvent(${obj.pid}, window.event)">-</button>
        <input type="text" value="${obj.pnum}" class="pnum">
        <button class="jia" onclick="addNumEvent(${obj.pid}, window.event)">+</button>
    </td>
    <td>
        <p style="color: crimson;" class="allPrice">${obj.pprice * obj.pnum}</p>
    </td>
    <td>
        <input type="button" value="删除" class="del" onclick="delEvent(${obj.pid},window.event)">
    </td>
</tr>
    `
    )
    resArr.unshift(`
    <tr>
        <th style="width: 300px; height:43px;">商品</th>
        <th style="width: 200px; height:43px;">单价</th>
        <th style="width: 200px; height:43px;">数量</th>
        <th style="width: 200px; height:43px;">小计</th>
        <th style="width: 100px; height:43px;">操作</th>
    </tr>
    `)

    $('.myCart_text').html(resArr.join(''))
    if (data.length == 0) {
        $(".have").addClass("yincang")
        $('.empty').removeClass("yincang")
    } else {
        $(".empty").addClass("yincang")
        $('.have').removeClass("yincang")
    }
    conterNum();
})


//数量更新
// 减
function subNumEvent(pid, evt) {
    let n = evt.target.nextElementSibling.value;
    n--;
    if (n < 1) {
        return;
    }
    evt.target.nextElementSibling.value = n;
    axios.get('http://jx.xuzhixiang.top/ap/api/cart-update-num.php', {
        params: {
            pid: pid,
            uid: uid,
            pnum: n
        }
    }).then(res => {
        console.log(res);
    })
    let Pprice = $(evt.target.parentNode.parentNode).find('.Pprice').html()
    let allPnum = n * Pprice
    $(evt.target.parentNode.parentNode).find('.allPrice').html(Number(allPnum))

    conterNum();
}

//加
function addNumEvent(pid, evt) {
    let n = evt.target.previousElementSibling.value;
    n++;
    evt.target.previousElementSibling.value = n;
    axios.get('http://jx.xuzhixiang.top/ap/api/cart-update-num.php', {
        params: {
            pid: pid,
            uid: uid,
            pnum: n
        }
    }).then(res => {
        console.log(res);
    })
    let Pprice = $(evt.target.parentNode.parentNode).find('.Pprice').html()
    let allPnum = n * Pprice
    $(evt.target.parentNode.parentNode).find('.allPrice').html(Number(allPnum))

    conterNum();
}






//商品删除

/* 删除用户购物车中的商品 接口
接口地址：http://jx.xuzhixiang.top/ap/api/cart-delete.php
接口请求方式：get
接口参数：
     uid  用户id
     pid  商品id
使用方式
     删除用户1中的 id为1商品
     http://jx.xuzhixiang.top/ap/api/cart-delete.php?uid=1&pid=1
服务器返回json数据 */

function delEvent(pid, evt) {
    axios.get('http://jx.xuzhixiang.top/ap/api/cart-delete.php', {
        params: {
            uid: uid,
            pid: pid
        }
    }).then(res => {
        alert(res.data.msg)
        evt.target.parentNode.parentNode.remove()
    })

}

// 复选框 全选
let allBtn = document.querySelector(".allCheck")
allBtn.onchange = function () {
    console.log(this.checked);
    let singleBtns = document.querySelectorAll('.che')
    singleBtns.forEach(btn => btn.checked = this.checked)

    // countPrice()
}


// ajax 请求以后才有 单选按钮
// let singleBtns = document.querySelectorAll('.che')
// console.log(singleBtns);
document.onchange = function (evt) {
    if (evt.target.classList.contains('che')) {
        // console.log('single');
        // // countPrice()

        // // 获取所有单选按钮
        let singleBtns = document.querySelectorAll('.che')
        console.log(singleBtns);
        // 判断 是否所有的单选按钮 checked都是true 
        // [...singleBtns] 转为真数组
        let flag = [...singleBtns].every(v => v.checked == true);
        allBtn.checked = flag;
        for (let i = 0; i < singleBtns.length; i++) {
            singleBtns[i].onclick = () => {
                let count = 0; //计数用的，默认为0，每次点击时，重新开始计算
                for (let j = 0; j < singleBtns.length; j++) {
                    if (singleBtns[j].checked) { //只要有选中的计数器+1
                        count++;
                        $(".jiesuan_span").html(count);
                    }
                    console.log(count);
                }
            }
        }
    }
}

// // 计算总价
function conterNum() {
    let allNum = $('.allPrice').html();
    $('.jiesuan_num').html(Number(allNum))
}
conterNum()








